<template>
  <div :style="styleColor">
    <div v-show="ueShow" id="ue" ref="ue"></div>
    <i v-show="!ueShow" class="el-icon-link"></i>
  </div>
</template>

<script>
// import { TUMap } from "@/lib/tumap";
export default {
  name: "WidgetUE",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      options: {},
      _ueurl: "",
      ueShow: true,
      imgSrc: "",
      uid: 0,
    };
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px",
      };
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.ueInit();
      },
      deep: true,
    },
  },
  mounted() {
    this.options = this.value;
    this.ueInit();
  },
  methods: {
    //初始化三维地图
    ueInit() {
      if (this.options.setup.ueUrl === "") {
        this.ueShow = false;
        this._ueurl = "";
        return;
      }
      if (this._ueurl === this.options.setup.ueUrl) return;
      this.ueShow = true;
      this._ueurl = this.options.setup.ueUrl;
      window.UeGis = TUMap.createMap({
        id: this.$refs.ue,
        url: this._ueurl,

        timeOut: 15000, //超时时间 加载场景超时设置 默认 15秒
        resolution: null, //默认分辨率  {width:1920,height:1080}
        doubleRender: false, //是否开启双倍渲染
        location: null, //默认镜头位置
        rotation: null, //默认镜头旋转角度
        distance: null, //默认镜头高度

        //成功建立链接
        onInit: () => {},
        //加载失败处理
        onError: () => {},
        //开始场景渲染处理
        onBegin: () => {},
        //远程流关闭处理
        onClose: () => {},
        //镜头变化处理
        onCameraChange: () => {},
      });
    },
  },
};
</script>

<style scoped lang="scss">
#cesiumContainer {
  width: 100%;
  height: 100%;
  display: block;
}
i {
  display: inline-block;
  font-size: 40px;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -20px;
  margin-left: -20px;
}
</style>
